﻿<template>
  <div>
    <template v-if="widget.type == 'table'">
      <div class='page_tableContent' v-show = "Object.keys(widget.options).indexOf('isHidden') === -1 || !widget.options.isHidden">
        <el-table :data='widget.tableData' style='magrin-bottom:20px;' :style = "{width: widget.options.width}" :stripe = 'widget.options.stripe' :border = 'widget.options.border'>
          <el-table-column align='center' v-for='(tableItem) in widget.tableColumn' :key='tableItem.indexName' :label='tableItem.text'>
            <template slot-scope='scope'>
              <span>{{scope.row[tableItem.indexName]}}</span>
            </template>
          </el-table-column>
          <el-table-column align='center' v-if="widget.options.rowEvents && widget.options.rowEvents.length" label = '操作'>
            <template slot-scope='scope'>
              <el-button type='text' v-for = '(eventItem, eventIndex) in widget.options.rowEvents' :key = 'eventIndex' @click = 'triggerRowEvent(widget, scope.row, eventItem)'>
                <span v-if = "eventItem.eventsType === 'edit'"><i class='iconfont icon-bianji'></i>编辑</span>
                <span v-else-if = "eventItem.eventsType === 'delete'"><i class='iconfont icon-shanchu'></i>删除</span>
                <span v-else-if = "eventItem.eventsType === 'preview'"><i class='iconfont icon-yanj'></i>查看</span>
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </template>
    <template v-if="widget.type == 'table'">
      <div class='page_tableContent' v-show = "Object.keys(widget.options).indexOf('isHidden') === -1 || !widget.options.isHidden">
        <list-box-table :myConfig="widget.options"></list-box-table>
      </div>
    </template>
    <template v-else-if = "widget.type == 'pagination'">
      <el-pagination v-show = "Object.keys(widget.options).indexOf('isHidden') === -1 || !widget.options.isHidden"
      background
      :current-page.sync = "widget.options.currentPage"
      :page-size = 'widget.options.pageSize'
      :pager-count="5"
      :page-sizes="[10, 25, 50, 100]"
      layout="total, sizes, prev, pager, next"
      :total = 'widget.options.totalLength'>
      </el-pagination>
    </template>
    <template v-else-if = "widget.type == 'bottomButton'">
      <div :style = "{'text-align': Object.keys(widget.options).indexOf('textAlign') !== -1 ? widget.options.textAlign : 'left'}"
      v-show = "Object.keys(widget.options).indexOf('isHidden') === -1 || !widget.options.isHidden">
        <el-button :type = "widget.options.type" :disabled = "widget.options.disabled">{{widget.name}}</el-button>
      </div>
    </template>
    <template v-else>
      <el-form-item :label="(widget.type === 'button' || !widget.options.showLabel) ? '' : widget.name" :prop="widget.model"
      :class = "(widget.type === 'button' || !widget.options.showLabel) ? 'form_noLeftMargin' : ''"
      v-show = "Object.keys(widget.options).indexOf('isHidden') === -1 || !widget.options.isHidden">
        <template v-if="widget.type == 'input'" >
          <el-input v-model="dataModel" :placeholder="widget.options.placeholder" :style="{width: widget.options.width}"
          :disabled="widget.options.disabled" :clearable="widget.options.clearable"
          :maxlength = "(Object.keys(widget.options).indexOf('maxLength') !== -1 && widget.options.maxLength > 0) ? widget.options.maxLength : Infinity"
          :show-word-limit = "(Object.keys(widget.options).indexOf('maxLength') !== -1 && widget.options.maxLength > 0) ? true : false">
            <el-button slot="append"
              v-if = "Object.keys(widget.options).indexOf('linkageOption') !== -1 && widget.options.linkageOption.isLinkage && widget.options.linkageOption.linkageType === 'eventRender'">
              <i class= 'iconfont icon-zidingyi'></i>
            </el-button>
          </el-input>
        </template>

        <template v-if="widget.type == 'textarea'">
          <el-input type="textarea" v-model="dataModel" :disabled="widget.options.disabled" :placeholder="widget.options.placeholder" :style="{width: widget.options.width}"
          :autosize="widget.options.autosize" :clearable="widget.options.clearable"
          :maxlength = "(Object.keys(widget.options).indexOf('maxLength') !== -1 && widget.options.maxLength > 0) ? widget.options.maxLength : Infinity"
          :show-word-limit = "(Object.keys(widget.options).indexOf('maxLength') !== -1 && widget.options.maxLength > 0) ? true : false"></el-input>
        </template>

        <template v-if="widget.type == 'select'">
          <el-select v-model="dataModel" :disabled="widget.options.disabled" :multiple="widget.options.multiple" :clearable="widget.options.clearable"
          :placeholder="widget.options.placeholder" :style="{width: widget.options.width}" :filterable="widget.options.filterable">
            <el-option v-for="item in (widget.options.remote ? widget.options.remoteOptions : widget.options.options)" :key="item.value" :value="item.value" :label="item.label"></el-option>
          </el-select>
        </template>

        <template v-if="widget.type == 'number'">
          <el-input-number v-model="dataModel" :style="{width: widget.options.width}" :step="widget.options.step" controls-position="widget.options.controlsPosition"
          :min = "widget.options.min === null ? -Infinity : widget.options.min" :max = "widget.options.max === null ? Infinity : widget.options.max" :precision="widget.options.precision" :disabled="widget.options.disabled"
          :class = "widget.options.controlsShow ? '' : 'inputNumber_noControls'" :controls = 'widget.options.controlsShow'></el-input-number>
        </template>

        <template v-if = "widget.type == 'JSONEditor' || widget.type=='MD' || widget.type=='RichText' || widget.type == 'MapXY' || widget.type == 'PicXY'">
          <el-input v-model = "dataModel" placeholder = '点击输入内容'
          :disabled = 'widget.options.disabled'></el-input>
        </template>

        <template v-if="widget.type == 'radio'">
          <el-radio-group v-model="dataModel" :style="{width: widget.options.width,height: widget.options.height}" :disabled="widget.options.disabled">
            <el-radio :style="{display: widget.options.inline ? 'inline-block' : 'block'}"
            :label="item.value" v-for="(item, index) in (widget.options.remote ? widget.options.remoteOptions : widget.options.options)" :key="index"
            >
              <template>{{item.label}}</template>
            </el-radio>
          </el-radio-group>
        </template>
        <template v-if="widget.type == 'checkbox'">
          <el-checkbox-group v-model="dataModel" :style="{width: widget.options.width}" :disabled="widget.options.disabled">
            <el-checkbox  :style="{display: widget.options.inline ? 'inline-block' : 'block'}"
            :label="item.value" v-for="(item, index) in (widget.options.remote ? widget.options.remoteOptions : widget.options.options)" :key="index"
            >
              <template>{{item.label}}</template>
            </el-checkbox>
          </el-checkbox-group>
        </template>

        <template v-if="widget.type == 'time'">
          <el-time-picker v-model="dataModel" :is-range="widget.options.isRange" :placeholder="widget.options.placeholder" :start-placeholder="widget.options.startPlaceholder"
          :end-placeholder="widget.options.endPlaceholder" :disabled="widget.options.disabled" :editable="widget.options.editable"
          :clearable="widget.options.clearable" :range-separator="widget.options.rangeSeparator" :value-format="widget.options.format" :style="{width: widget.options.width}">
          </el-time-picker>
        </template>

        <template v-if="widget.type=='date'">
          <el-date-picker v-model="dataModel" :type="widget.options.type" :placeholder="widget.options.placeholder" :start-placeholder="widget.options.startPlaceholder"
          :end-placeholder="widget.options.endPlaceholder" :disabled="widget.options.disabled" :editable="widget.options.editable"
          :clearable="widget.options.clearable" :format="widget.options.format" :style="{width: widget.options.width}">
          </el-date-picker>
        </template>

        <template v-if="widget.type =='rate'">
          <el-rate v-model="dataModel" :max="widget.options.max" :disabled="widget.options.disabled" :allow-half="widget.options.allowHalf" :show-score="widget.options.showScore"></el-rate>
        </template>

        <template v-if="widget.type == 'color'">
          <el-color-picker v-model="dataModel" :disabled="widget.options.disabled" :show-alpha="widget.options.showAlpha"></el-color-picker>
        </template>

        <template v-if="widget.type=='switch'">
          <el-switch v-model="dataModel" :disabled="widget.options.disabled"></el-switch>
        </template>

        <template v-if="widget.type=='slider'">
          <el-slider  v-model="dataModel" :min="widget.options.min" :max="widget.options.max" :disabled="widget.options.disabled" :step="widget.options.step" :show-input="widget.options.showInput"
          :range="widget.options.range"
          :style="{width: widget.options.width}"></el-slider>
        </template>

        <template v-if = "widget.type=='imgupload'">
          <el-upload action='#' disabled drag>
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          </el-upload>
        </template>

        <template v-if = "widget.type == 'video'">
          <el-upload action = '#' disabled drag>
            <i class = "el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          </el-upload>
        </template>

        <template v-if="widget.type == 'button'">
          <el-button :disabled="widget.options.disabled" :type="widget.options.type">{{widget.name}}</el-button>
        </template>
        <template v-if="widget.type == 'editTable'">
          <div class="addColumn" v-if = "Object.keys(widget.options).indexOf('showAdd') === -1 ? !widget.options.disabled : widget.options.showAdd">
            <p> <i class="iconfont icon-add"></i>添加数据</p>
          </div>
          <el-table :data='widget.tableData' :style = "{width: widget.options.width}" :stripe = 'widget.options.stripe' :border = 'widget.options.border'>
            <el-table-column align='center' v-for='(tableItem) in widget.tableColumn' :key='tableItem.indexName' :label='tableItem.text'>
              <template slot-scope='scope'>
                <span>{{scope.row[tableItem.indexName]}}</span>
              </template>
            </el-table-column>
            <el-table-column align='center' v-if = "Object.keys(widget.options).indexOf('showAdd') === -1 ? !widget.options.disabled : widget.options.showAdd" label = '操作'>
              <template slot-scope='scope'>
                <el-button type='text'>
                  <span><i class='iconfont icon-shanchu'></i>删除</span>
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-form-item>
    </template>
  </div>
</template>

<script>
import ListBox from '@/components/common/ListBox.vue'
export default {
  components: {ListBox},
  props: ['widget', 'models', 'rules'],
  data () {
    return {
      dataModel: this.models[this.widget.model],
      showOrHide: ''
    }
  },
  watch: {
    dataModel: {
      deep: true,
      handler (val) {
        this.models[this.widget.model] = val
        this.$emit('update:models', {
          ...this.models,
          [this.widget.model]: val
        })
      }
    },
    models: {
      deep: true,
      handler (val) {
        this.dataModel = val[this.widget.model]
      }
    }
  }
}
</script>
